<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>仪表盘</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">

</head>
<body class="content-wrapper" style="padding: 15px">
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header border-0">
                <h3 class="card-title">数据应用概览</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="info-box" style="margin: 0; box-shadow: none">
                            <span class="info-box-icon bg-info"><i class="fa fa-database"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">数据源</span>
                                <span id="data-source-count" class="info-box-number">0</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="info-box" style="margin: 0; box-shadow: none">
                            <span class="info-box-icon bg-info"><i class="fa fa-cubes"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">数据项目</span>
                                <span id="data-project-count" class="info-box-number">0</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="info-box" style="margin: 0; box-shadow: none">
                            <span class="info-box-icon bg-info"><i class="fa fa-copy"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">备份计划</span>
                                <span id="data-backup-plan-count" class="info-box-number">0</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="info-box" style="margin: 0; box-shadow: none">
                            <span class="info-box-icon bg-info"><i class="fa fa-paste"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">对比计划</span>
                                <span id="data-compare-plan-count" class="info-box-number">0</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header border-0">
                <h3 class="card-title">数据任务统计</h3>
            </div>
            <div class="card-body">
                <canvas id="data-task-line-by-day" style="width: 100%; height: 250px"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header border-0">
                <h3 class="card-title">数据源状态统计</h3>
            </div>
            <div class="card-body">
                <canvas id="data-source-count-by-status-chart" style="width: 100%; height: 300px"></canvas>
            </div>
        </div>
    </div>
</div>

<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../plugins/chart.js/Chart.min.js"></script>
<script src="../../adminLTE/js/adminlte.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    var colors = ['#3c8dbc', '#0073b7', '#00c0ef', '#65aab2', '#147990'];
    var colorSuccess = "#28a745"
    var colorDanger = "#dc3545"
    var colorWarning = "#ffc107"
    var colorInfo = "#17a2b8"

    var services = [];
    $.ajax({
        url: Url.serviceList,
        type: HttpMethod.get,
        async: false,
        success: function (result, status, xhr) {
            for (var i = 0; i < result.length; i++) {
                if (result[i].upCount > 0) {
                    services.push(result[i].name)
                }
            }
        }
    });

    if (services.includes("DATA-SERVICE")) {

        $.ajax({
            url: Url.dataService.dataStatsCountDataSourceByStatus,
            type: HttpMethod.get,
            success: function (result, status, xhr) {
                var normal = result["NORMAL"];
                var abnormal = result["ABNORMAL"];
                var total = 0;
                for (key in result) {
                    total += result[key];
                }
                var other = total - normal - abnormal;

                var donutData = {
                    labels: ['正常', '异常', '其他',],
                    datasets: [{
                        data: [normal, abnormal, other],
                        backgroundColor: [colorInfo, colorDanger, colorWarning],
                    }]
                }
                new Chart($('#data-source-count-by-status-chart').get(0).getContext('2d'), {
                    type: "doughnut",
                    data: donutData,
                })
            }
        });

        $.ajax({
            url: Url.dataService.dataStatsCountDataSource,
            type: HttpMethod.get,
            success: function (result, status, xhr) {
                $("#data-source-count").html(result);
            }
        });

        $.ajax({
            url: Url.dataService.dataStatsCountDataProject,
            type: HttpMethod.get,
            success: function (result, status, xhr) {
                $("#data-project-count").html(result);
            }
        });

        $.ajax({
            url: Url.dataService.dataStatsCountDataBackupPlan,
            type: HttpMethod.get,
            success: function (result, status, xhr) {
                $("#data-backup-plan-count").html(result);
            }
        });

        $.ajax({
            url: Url.dataService.dataStatsCountDataComparePlan,
            type: HttpMethod.get,
            success: function (result, status, xhr) {
                $("#data-compare-plan-count").html(result);
            }
        });

        $.ajax({
            url: Url.dataService.dataStatsSumDataTaskByDay,
            type: HttpMethod.get,
            success: function (result, status, xhr) {
                var labels = [];
                var backup = [], recovery = [], compare = [];
                for (key in result) {
                    labels.push(key);
                    backup.push(result[key][0]);
                    recovery.push(result[key][1]);
                    compare.push(result[key][2]);
                }
                var lineData = {
                    labels: labels,
                    datasets: [
                        {label: "备份", borderColor: colorSuccess, backgroundColor: colorSuccess, data: backup, fill: false},
                        {label: "恢复", borderColor: colorWarning, backgroundColor: colorWarning, data: recovery, fill: false},
                        {label: "对比", borderColor: colorInfo, backgroundColor: colorInfo, data: compare, fill: false},
                    ]
                }
                var lineChart = new Chart($("#data-task-line-by-day").get(0).getContext("2d"), {
                    type: 'line',
                    data: lineData
                })
            }
        });
    }
</script>
</body>
</html>